React Server Actions: Serverio Pusės Formų Apdorojimas Supaprastintas

React Server Actions, pristatytos React 18 ir žymiai patobulintos Next.js, siūlo revoliucinį požiūrį į formų pateikimo ir duomenų mutacijų valdymą tiesiogiai serveryje. Ši galinga funkcija supaprastina kūrimo procesą, padidina saugumą ir pagerina našumą, palyginti su tradiciniu kliento pusės duomenų gavimu ir manipuliavimu.

Kas yra React Server Actions?

Server Actions yra asinchroninės funkcijos, kurios veikia serveryje ir gali būti iškviečiamos tiesiogiai iš React komponentų. Jos leidžia atlikti serverio pusės užduotis, tokias kaip:

• Formų Pateikimas: Saugiai apdorokite formos duomenis serveryje.
• Duomenų Mutacijos: Atnaujinkite duomenų bazes arba išorinius API.
• Autentifikavimas: Tvarkykite vartotojų prisijungimus ir registraciją.
• Serverio Pusės Logika: Vykdykite sudėtingą verslo logiką, neatskleisdami jos klientui.

Pagrindinis Server Actions privalumas yra tas, kad jos leidžia jums rašyti serverio pusės kodą savo React komponentuose, pašalinant atskirų API maršrutų ir sudėtingos kliento pusės duomenų gavimo logikos poreikį. Šis UI ir serverio pusės logikos sujungimas lemia lengviau prižiūrimą ir efektyvesnį kodo bazę.

React Server Actions Naudojimo Privalumai

React Server Actions naudojimas suteikia keletą reikšmingų privalumų:

Supaprastintas Kūrimas

Server Actions sumažina standartinio kodo kiekį, leisdamos jums tvarkyti formų pateikimą ir duomenų mutacijas tiesiogiai savo React komponentuose. Tai pašalina atskirų API galinių taškų ir sudėtingos kliento pusės duomenų gavimo logikos poreikį, supaprastindama kūrimo procesą ir padarydama jūsų kodą lengviau suprantamą ir prižiūrimą. Apsvarstykite paprastą kontaktinę formą. Be Server Actions, jums reikėtų atskiro API maršruto formos pateikimui tvarkyti, kliento pusės JavaScript duomenims siųsti ir klaidų apdorojimo logikos tiek kliente, tiek serveryje. Su Server Actions visa tai galima tvarkyti pačiame komponente.

Padidintas Saugumas

Vykdydamos kodą serveryje, Server Actions sumažina jūsų programos atakos paviršių. Slapti duomenys ir verslo logika yra saugomi nuo kliento, neleidžiant kenkėjiškiems vartotojams jais manipuliuoti. Pavyzdžiui, duomenų bazės kredencialai arba API raktai niekada nėra atskleidžiami kliento pusės kode. Visos sąveikos su duomenų baze vyksta serveryje, sumažinant SQL injekcijos arba neteisėtos prieigos prie duomenų riziką.

Pagerintas Našumas

Server Actions gali pagerinti našumą sumažinant JavaScript kiekį, kurį reikia atsisiųsti ir vykdyti kliente. Tai ypač naudinga vartotojams, naudojantiems mažos galios įrenginius arba turintiems lėtus interneto ryšius. Duomenų apdorojimas vyksta serveryje, o klientui siunčiami tik būtini UI atnaujinimai, todėl puslapiai įkeliami greičiau ir vartotojo patirtis yra sklandesnė.

Optimistiniai Atnaujinimai

Server Actions sklandžiai integruojasi su React Suspense ir Transitions, įgalindamos optimistinius atnaujinimus. Optimistiniai atnaujinimai leidžia jums atnaujinti UI iš karto, net prieš tai, kai serveris patvirtino veiksmą. Tai suteikia labiau reaguojančią ir patrauklią vartotojo patirtį, nes vartotojams nereikia laukti, kol serveris atsakys, prieš pamatant savo veiksmų rezultatus. Elektroninėje prekyboje prekės įdėjimas į pirkinių krepšelį gali būti rodomas iš karto, kol serveris patvirtina įdėjimą fone.

Progresyvus Tobulinimas

Server Actions palaiko progresyvų tobulinimą, o tai reiškia, kad jūsų programa vis dar gali veikti, net jei JavaScript yra išjungtas arba nepavyksta įkelti. Kai JavaScript yra išjungtas, formos bus pateikiamos kaip tradicinės HTML formos, o serveris tvarkys pateikimą ir peradresuos vartotoją į naują puslapį. Tai užtikrina, kad jūsų programa išliks prieinama visiems vartotojams, neatsižvelgiant į jų naršyklės konfigūraciją ar tinklo sąlygas. Tai ypač svarbu prieinamumui ir SEO.

Kaip Naudoti React Server Actions

Norėdami naudoti React Server Actions, turėsite naudoti sistemą, kuri jas palaiko, pvz., Next.js. Štai žingsnis po žingsnio vadovas:

1. Apibrėžkite Server Action

Sukurkite asinchroninę funkciją, kuri veiks serveryje. Ši funkcija turėtų tvarkyti logiką, kurią norite vykdyti serveryje, pvz., atnaujinti duomenų bazę arba iškviesti API. Pažymėkite funkciją su "use server" direktyva viršuje, kad nurodytumėte, jog tai yra Server Action. Ši direktyva nurodo React kompiliatoriui traktuoti funkciją kaip serverio pusės funkciją ir automatiškai tvarkyti duomenų serializavimą ir deserializavimą tarp kliento ir serverio.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

Paaiškinimas:

• 'use server' direktyva pažymi šią funkciją kaip Server Action.
• revalidatePath('/') išvalo maršruto talpyklą, užtikrindama, kad atnaujinti duomenys būtų gaunami kitame užklausoje. Tai labai svarbu duomenų nuoseklumui palaikyti.
• saveMessage(message) yra jūsų faktinės sąveikos su duomenų baze logikos vietos rezervavimo ženklas. Ji daro prielaidą, kad turite saveMessage funkciją, apibrėžtą kitur, kad tvarkytumėte pranešimo išsaugojimą savo duomenų bazėje.
• Funkcija grąžina būsenos objektą, kuris gali būti naudojamas atsiliepimams vartotojui rodyti.

2. Importuokite ir Naudokite Server Action savo Komponente

Importuokite Server Action į savo React komponentą ir naudokite jį kaip action prop ant formos elemento. useFormState kabliukas gali būti naudojamas formos būsenai valdyti ir atsiliepimams vartotojui rodyti.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Paaiškinimas:

• 'use client' direktyva nurodo, kad tai yra Client Component (nes jis naudoja useFormState).
• useFormState(createMessage, {message: ''}) inicializuoja formos būseną su createMessage Server Action. Antrasis argumentas yra pradinė būsena.
• form elemento action prop nustatytas į formAction, grąžintą useFormState.
• state kintamasis turi grąžinamąją reikšmę iš Server Action, kuri gali būti naudojama atsiliepimams vartotojui rodyti.

3. Tvarkykite Formos Duomenis

Server Action viduje galite pasiekti formos duomenis naudodami FormData API. Ši API suteikia patogų būdą pasiekti formos laukų reikšmes.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Tvarkykite Klaidas

Naudokite try...catch blokus klaidoms, kurios gali įvykti vykdant Server Action, tvarkyti. Grąžinkite klaidos pranešimą būsenos objekte, kad jį parodytumėte vartotojui.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

5. Iš naujo Patvirtinkite Duomenis

Po to, kai Server Action sėkmingai pakeitė duomenis, jums gali reikėti iš naujo patvirtinti duomenų talpyklą, kad užtikrintumėte, jog UI atspindėtų naujausius pakeitimus. Naudokite revalidatePath arba revalidateTag funkcijas iš next/cache, kad iš naujo patvirtintumėte konkrečius kelius arba žymes.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}
            

              
                Copy
              
            
          

Išplėstinis Naudojimas

Duomenų Mutavimas

Server Actions ypač tinka duomenų mutavimui, pvz., duomenų bazių arba išorinių API atnaujinimui. Galite naudoti Server Actions sudėtingoms duomenų mutacijoms tvarkyti, kurioms reikalinga serverio pusės logika, pvz., duomenų validavimas, skaičiavimų atlikimas arba sąveika su keliais duomenų šaltiniais. Apsvarstykite scenarijų, kai jums reikia atnaujinti vartotojo profilį ir išsiųsti patvirtinimo el. laišką. Server Action gali tvarkyti tiek duomenų bazės atnaujinimą, tiek el. laiško siuntimo procesą vienoje, atominėje operacijoje.

Autentifikavimas ir Autorizacija

Server Actions gali būti naudojamos autentifikavimui ir autorizacijai tvarkyti. Atlikdami autentifikavimo ir autorizacijos patikrinimus serveryje, galite užtikrinti, kad tik įgalioti vartotojai turėtų prieigą prie slaptų duomenų ir funkcionalumo. Galite naudoti Server Actions vartotojų prisijungimams, registracijai ir slaptažodžių atkūrimui tvarkyti. Pavyzdžiui, Server Action gali patikrinti vartotojo kredencialus duomenų bazėje ir grąžinti prieigos raktą, kuris gali būti naudojamas vėlesnėms užklausoms autentifikuoti.

Edge Funkcijos

Server Actions gali būti diegiamos kaip Edge Funkcijos, kurios veikia globaliame serverių tinkle arti jūsų vartotojų. Tai gali žymiai sumažinti latentinį laiką ir pagerinti našumą, ypač vartotojams geografiškai išsibarsčiusiose vietose. Edge Funkcijos idealiai tinka Server Actions, kurioms reikalingas mažas latentinis laikas, pvz., duomenų atnaujinimai realiuoju laiku arba personalizuoto turinio teikimas. Next.js teikia integruotą Server Actions diegimo kaip Edge Funkcijas palaikymą.

Srautinis Siuntimas

Server Actions palaiko srautinį siuntimą, kuris leidžia jums siųsti duomenis klientui dalimis, kai jie tampa prieinami. Tai gali pagerinti suvokiamą jūsų programos našumą, ypač Server Actions, kurios trunka ilgą laiką. Srautinis siuntimas ypač naudingas tvarkant didelius duomenų rinkinius arba sudėtingus skaičiavimus. Pavyzdžiui, galite siųsti paieškos rezultatus klientui, kai jie gaunami iš duomenų bazės, suteikdami labiau reaguojančią vartotojo patirtį.

Geriausia Praktika

Štai keletas geriausių praktikų, kurių reikia laikytis naudojant React Server Actions:

• Laikykite Server Actions mažas ir orientuotas: Kiekviena Server Action turėtų atlikti vieną, gerai apibrėžtą užduotį. Tai padaro jūsų kodą lengviau suprantamą, testuojamą ir prižiūrimą.
• Naudokite aprašomuosius pavadinimus: Pasirinkite pavadinimus, kurie aiškiai nurodo Server Action tikslą. Pavyzdžiui, createComment arba updateUserProfile yra geresni nei bendriniai pavadinimai, tokie kaip processData.
• Validuokite duomenis serveryje: Visada validuokite duomenis serveryje, kad apsaugotumėte nuo kenkėjiškų vartotojų, įterpiančių neteisingus duomenis į jūsų programą. Tai apima duomenų tipų, formatų ir diapazonų validavimą.
• Tvarkykite klaidas grakščiai: Naudokite try...catch blokus klaidoms tvarkyti ir pateikite informatyvius klaidos pranešimus vartotojui. Venkite atskleisti slaptą klaidų informaciją klientui.
• Naudokite optimistinius atnaujinimus: Suteikite labiau reaguojančią vartotojo patirtį atnaujindami UI iš karto, net prieš tai, kai serveris patvirtino veiksmą.
• Iš naujo patvirtinkite duomenis, kai reikia: Užtikrinkite, kad UI atspindėtų naujausius pakeitimus iš naujo patvirtindami duomenų talpyklą po to, kai Server Action pakeitė duomenis.

Realūs Pavyzdžiai

Apsvarstykime keletą realių pavyzdžių, kaip React Server Actions gali būti naudojamos skirtingų tipų programose:

Elektroninės Prekybos Programa

• Prekės įdėjimas į pirkinių krepšelį: Server Action gali tvarkyti prekės įdėjimą į vartotojo pirkinių krepšelį ir atnaujinti krepšelio sumą duomenų bazėje. Optimistiniai atnaujinimai gali būti naudojami norint iš karto parodyti prekę krepšelyje.
• Mokėjimo apdorojimas: Server Action gali tvarkyti mokėjimo apdorojimą naudojant trečiosios šalies mokėjimo šliuzą. Server Action taip pat gali atnaujinti užsakymo būseną duomenų bazėje ir išsiųsti patvirtinimo el. laišką vartotojui.
• Produkto apžvalgos pateikimas: Server Action gali tvarkyti produkto apžvalgos pateikimą ir išsaugojimą duomenų bazėje. Server Action taip pat gali apskaičiuoti vidutinį produkto įvertinimą ir atnaujinti produkto informacijos puslapį.

Socialinės Žiniasklaidos Programa

• Naujo tweet paskelbimas: Server Action gali tvarkyti naujo tweet paskelbimą ir išsaugojimą duomenų bazėje. Server Action taip pat gali atnaujinti vartotojo laiko juostą ir pranešti jų sekėjams.
• Įrašo patiktukų paspaudimas: Server Action gali tvarkyti įrašo patiktukų paspaudimą ir patiktukų skaičiaus atnaujinimą duomenų bazėje. Optimistiniai atnaujinimai gali būti naudojami norint iš karto parodyti atnaujintą patiktukų skaičių.
• Vartotojo sekimas: Server Action gali tvarkyti vartotojo sekimą ir sekėjų bei sekamų skaičių atnaujinimą duomenų bazėje.

Turinio Valdymo Sistema (CMS)

• Naujo tinklaraščio įrašo kūrimas: Server Action gali tvarkyti naujo tinklaraščio įrašo kūrimą ir išsaugojimą duomenų bazėje. Server Action taip pat gali generuoti įrašo slug ir atnaujinti svetainės žemėlapį.
• Puslapio atnaujinimas: Server Action gali tvarkyti puslapio atnaujinimą ir išsaugojimą duomenų bazėje. Server Action taip pat gali iš naujo patvirtinti puslapio talpyklą, kad užtikrintų, jog atnaujintas turinys būtų rodomas vartotojams.
• Pakeitimo paskelbimas: Server Action gali tvarkyti pakeitimo paskelbimą duomenų bazėje ir pranešti visiems prenumeratoriams.

Internacionalizacijos Aspektai

Kuriant programas pasaulinei auditorijai, būtina atsižvelgti į internacionalizaciją (i18n) ir lokalizaciją (l10n). Štai keletas aspektų, į kuriuos reikia atsižvelgti naudojant React Server Actions internacionalizuotose programose:

• Skirtingų datos ir laiko formatų tvarkymas: Naudokite Intl API, kad formatuotumėte datas ir laikus pagal vartotojo lokalę.
• Skirtingų skaičių formatų tvarkymas: Naudokite Intl API, kad formatuotumėte skaičius pagal vartotojo lokalę.
• Skirtingų valiutų tvarkymas: Naudokite Intl API, kad formatuotumėte valiutas pagal vartotojo lokalę.
• Klaidų pranešimų vertimas: Išverskite klaidų pranešimus į vartotojo kalbą.
• Palaikykite kalbas iš dešinės į kairę (RTL): Užtikrinkite, kad jūsų programa palaikytų RTL kalbas, tokias kaip arabų ir hebrajų.

Pavyzdžiui, apdorojant formą, kuriai reikalingas datos įvedimas, Server Action gali naudoti Intl.DateTimeFormat API datai analizuoti pagal vartotojo lokalę, užtikrinant, kad data būtų teisingai interpretuojama, neatsižvelgiant į vartotojo regioninius nustatymus.

Išvada

React Server Actions yra galingas įrankis, skirtas supaprastinti serverio pusės formų apdorojimą ir duomenų mutacijas React programose. Leisdamos jums rašyti serverio pusės kodą tiesiogiai savo React komponentuose, Server Actions sumažina standartinio kodo kiekį, padidina saugumą, pagerina našumą ir įgalina optimistinius atnaujinimus. Laikydamiesi geriausių praktikų, aprašytų šiame vadove, galite pasinaudoti Server Actions, kad sukurtumėte tvirtesnes, labiau keičiamo dydžio ir prižiūrimas React programas. React toliau tobulėjant, Server Actions neabejotinai atliks vis svarbesnį vaidmenį žiniatinklio kūrimo ateityje.